<template>
	<view class="qiun-columns">
		<view class="select-box">
			<sun-dropDown v-on:onSubmitAddress="onSubmitAddress"></sun-dropDown>
		</view>
		<view class="dates-box ">
			<view class="dates f-row-between">
				<view class="date f-center" :style="{ width: 100 / dateTypes.length - 3 + '%' }" :class="selected == 'd' ? 'selected' : ''"
				 @click="selected = 'd'">
					日
				</view>
				<view class="date f-center" :style="{ width: 100 / dateTypes.length - 3 + '%' }" :class="selected == 'mz' ? 'selected' : ''"
				 @click="selected ='mz'">
					周
				</view>
				<view class="date f-center" :style="{ width: 100 / dateTypes.length - 3 + '%' }" :class="selected == 'm' ? 'selected' : ''"
				 @click="selected ='m'">
					月
				</view>
				<view class="date f-center" :style="{ width: 100 / dateTypes.length - 3 + '%' }" :class="selected == 'y' ? 'selected' : ''"
				 @click="selected = 'y'">
					年
				</view>
			</view>
			<uni-superDates :dateTypes="dateTypes" :selected="selected" v-on:onSubmit="onSubmit"></uni-superDates>
		</view>
		<view class="chart-box">
			<view class="money-block f-row-between">
				<view class="money-item f-column-WHcenter" v-for="(val, key, i) in resData.total" v-if="key != 'length'" :style="{ backgroundImage: resData.total[key].backgroundImage, width: 100 / chartData.series.length - 1.5 + '%' }">
					<view class="money f-row-Wcenter">
						<label v-show="chartData.series[key][0].name != '退货数量' ">￥</label>
						<label>{{ resData.total[key].numder }}</label>
						<label class="unit">{{ resData.total[key].unit}}</label>
					</view>
					<view>
						<label class="title">{{ chartData.series[key][0].name }}</label>
					</view>
				</view>
			</view>
		</view>
		<view class="retailDetails-box f-column">
			<view class="sun-tietleBox">
				<sun-tietleBox :tietleData="'零售明细'">
				</sun-tietleBox>
			</view>
			<view :id="idTopHeight" class="table-box f-row-Wcenter" :style="{padding:tableMargin +'rpx'}"> 
				<wyb-table ref="table" :width="'710rpx'" :defaultColWidth="defaultColWidth" :headers="headers" :contents="resData.list"
				 :header-bg-color="'#128A80'" :header-ft-color="'#ffffff'" :loading="false" :first-line-fixed="false" :maxHeight="topHeight - 10 - tableMargin * 2  +'rpx'"
				 :url-col="urlCol" :min-height="[65,50]" @onlower="onlower" :scrollHeight=" topHeight - 75 - tableMargin * 2  " />
			</view>
		</view>
		<view class="toastTitle">{{ query.toastTitle }}</view>
	</view>
</template>

<script>
	import sunTietleBox from '@/components/sun-titleBox/sun-tietleBox.vue';
	import sunDropDown from '@/components/sun-dropDown/sun-dropDown.vue';
	import api_server from '@/api/api_server.js';
	import wybTable from '@/components/wyb-table/wyb-table.vue';

	export default {
		components: {
			wybTable,
			sunDropDown,
			sunTietleBox
		},
		data() {
			return {
				//表格
				defaultColWidth: 167,
				idTopHeight: 'table-box',
				tableMargin: 20,
				topHeight: 100,


				dateTypes: ['d', 'mz', 'm', 'y'],
				selected: 'mz',

				//图表数据 取resData.list中的列数据
				chartDataType: 'ret_qty',
				chartData: {
					categories: [],
					series: {
						ret_qty: [{
							name: '退货数量',
							data: [],
							color: 'rgba(254, 214, 143, 1)'
						}],
						ret_amt: [{
							name: '退货金额',
							data: [],
							color: 'rgba(255, 0, 0, 1.0)'
						}],
						length: 2
					}
				},
				//定义头部字段
				headers: [

					{
						label: '货号',
						key: 'item_subno'
					},
					{
						label: '条码',
						key: 'item_barcode'
					},
					{
						label: '品名',
						key: 'item_name',
					},
					{
						label: '退货数量',
						key: 'ret_qty'
					},
					{
						label: '退货金额',
						key: 'ret_amt'
					}
				],
				//源数据
				resData: {
					total: {
						ret_qty: {
							numder: 0.0,
							backgroundImage: 'linear-gradient(to top right, rgba(0, 229, 0, 1.0), rgba(49, 200, 14, 1.0))'
						},
						ret_amt: {
							numder: 0.0,
							backgroundImage: 'linear-gradient(to top right, RGBA(195, 134, 253, 1), RGBA(143, 108, 244, 1))'
						}
					},
					list: [{

						item_id: '', //int	商品内部码 此列无用
						item_subno: '', //string	货号
						item_barcode: '', //	string	条码
						item_name: '', //string	品名
						ret_qty: '', //int	退货数量
						ret_amt: '' //	numeric(10,2)	退货金额
					}]
				},
				contents: [],

				urlCol: [{
						type: 'route',
						key: 'url'
					},
					{
						type: 'http',
						key: 'link'
					}
				],
				//查询query.dateSelect时间段

				query: {
					dateType: 'mz',
					dateSelect: [],

					anatype: 1, //分析周期 1、按周 2、按月 3、按年
					tottype: 1, //数据类型 1、全部 2、线上 3、线下
					branch_jg: '', //机构 支持%为全部机构
					toastTitle: '加载中...',
					start_date: 10000000,
					end_date: 10000000,
					ischange: true,
					pageindex: 1,
					pagesize: 10,
				},

			};
		},
		mounted() {
			this.$util.getDefaultColWidth(this, 710, 'headers', 'defaultColWidth');
		},
		computed: {
			userInfo() {
				var userInfo = this.$store.getters.getUserInfo;
				return userInfo;
			}
		},
		onInit() {
			this.onSubmitSend();
		},
		onReady() {
			this.$util.getTopHeight(this, this.idTopHeight, this.tableMargin);
		},
		methods: {
			//时间回调
			onSubmitSend() {
				this.$emit('onSubmitSend', false);
			},
			//处理反馈
			onSubmit(dates) {
				console.log('onSubmit>>>', dates);
				if (dates) {
					//清除旧数据
					this.resData.list = [];
					this.query = { ...this.query,
						...dates
					};
					this.login();
				}
			},

			login(isMore) {
				if (!this.query.branch_jg != '') {
					this.query.branch_name = this.userInfo.branch_name;
					this.query.branch_jg = this.userInfo.branch_default;
				}
				this.$api_server.dwzy_GetAppMlRetAnalysisList({
					data: this.query,
					success: res => {
						if (res.data) {
							//收银合计
							let query = this.query;
							//汇总
							let appmiretcount = res.data.data.appmiretcount;
							for (let key in this.resData.total) {
								if (appmiretcount[key]) {
									this.resData.total[key] = { ...this.resData.total[key],
										...this.$util.moneyUnit(appmiretcount[key])
									};
								}
							}

							if (this.query.pageindex == 1) {
								this.resData.list = res.data.data.appmiretlist;
							} else {
								this.resData.list = [...this.resData.list, ...res.data.data.appmiretlist];
							}

							//分页
							let listlength = this.resData.list.length;
							let totalCount = appmiretcount.rec_tot;

							this.query.totalPage = Math.ceil(totalCount / this.query.pagesize);
							if (listlength > 0) {
								if (listlength < totalCount) {
									this.query.toastTitle = '上滑加载更多...';
								} else {
									this.query.toastTitle = '没有更多了!';

								}
							} else {
								this.query.toastTitle = '没有更多了!';
							}
							this.query = query;
						}
					},
					fail(error) {
						console.log('rerror>>>', error);
					}
				});
			},
			// 下拉刷新
			onlower(e) {
				console.log('组件onlower');
				this.query.pageindex++;
				if (this.query.pageindex > this.query.totalPage) {
					return;
				}
				this.query.toastTitle = '加载中...';

				this.login('more');
			},
			onSubmitAddress(e) {
				this.query.branch_jg = e.address.branch_no;
				this.query.branch_name = e.address.branch_name;
				this.login();
			}
		}
	};
</script>

<style scoped lang="scss">
	.select-box {
		margin: 0 30upx;
	}

	.dates-box {
		background-color: #fcfdfd;
		padding: 20upx 30upx 0 30upx;
		border-radius: 15upx 15upx 0 0;
	}

	.chart-box {
		//height: 600upx;
		border-radius: 0 0 15upx 15upx;
		padding: 0 20upx 20upx 20upx;
		background-color: #fcfdfd;

		.money-block {
			width: 100%;
			padding-top: 30upx;
			border-top: 1rpx solid #d7d7d7;

			.money-item {
				height: 160upx;
				border-radius: 10upx;
				box-shadow: 2rpx 2rpx 15rpx rgba(224, 32, 32, 0.2);

				.money {
					width: 100%;
				}

				label:nth-of-type(1) {
					height: 30upx;
					font-size: 30upx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #fcfdfd;
					line-height: 62upx;
				}

				label:nth-of-type(2) {
					height: 38upx;
					font-size: 40upx;
					font-family: Source Han Sans CN;
					font-weight: bold;
					color: #fcfdfd;
				}

				.unit {
					height: 38upx;
					font-size: 40upx;
					font-family: Source Han Sans CN;
					font-weight: 600;
					color: #fcfdfd;
				}

				.title {
					height: 24upx;
					font-size: 20upx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #fcfdfd;
				}
			}

			.money-item:nth-of-type(1) {
				background-color: red;
				background-image: linear-gradient(to top right, RGBA(151, 214, 226, 1), RGBA(85, 210, 184, 1));
			}

			.money-item:nth-of-type(2) {
				background-color: red;
				background-image: linear-gradient(to top right, RGBA(195, 134, 253, 1), RGBA(143, 108, 244, 1));
			}

			.money-item:nth-of-type(3) {
				background-color: red;
				background-image: linear-gradient(to top right, RGBA(249, 197, 150, 1), RGBA(241, 121, 142, 1));
			}
		}


	}

	.retailDetails-box {
		border-radius: 15upx;
		background-color: #fcfdfd;
		margin-top: 25upx;
		margin-bottom: 2upx;

		//控制组件的缩进（外边距）
		.sun-tietleBox {
			margin: 0 20upx;
			//slot style 当前页面的样式
		}


	}

	.toastTitle {
		width: 100%;
		text-align: center;
		color: rgba(216, 216, 216, 0.9);
		margin-bottom: 2upx;
	}
</style>
